<style lang="less">
  .charge-offs-list {
    .el-form--inline .el-form-item {
      margin-bottom: 10px;
      margin-right: 0px;
    }
  }
</style>

<template>
  <el-dialog title="提取记录" :visible.sync="dialogVisible" class="charge-offs-list">
    <el-form :inline="true">
      <el-form-item label="提取时间">
        <el-date-picker
          v-model="chargeOffsDaterange"
          type="daterange"
          placeholder="选择日期范围">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="银行卡号">
        <el-input v-model="condition.LIKE_bankCardNumber"></el-input>
      </el-form-item>
      <el-form-item label="流水号">
        <el-input v-model="condition.LIKE_serialNumber"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="resetCondition">重置</el-button>
        <el-button type="primary" v-on:click="search">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" highlight-current-row border
              v-loading="listLoading" style="width: 100%;" height="300">
      <el-table-column type="index" width="55">
      </el-table-column>
      <el-table-column prop="chargeOffsDate" label="销帐时间" width="160">
      </el-table-column>
      <el-table-column prop="chargeOffsAmount" label="销帐金额" width="100">
      </el-table-column>
      <el-table-column prop="arrivalBank" label="到账银行" width="150">
      </el-table-column>
      <el-table-column prop="bankCardNumber" label="银行卡号" width="160">
      </el-table-column>
      <el-table-column prop="serialNumber" label="流水号" width="160">
      </el-table-column>
      <el-table-column prop="description" label="备注" width="80">
      </el-table-column>
      <el-table-column fixed="right" label="交易凭证" min-width="100">
        <template slot-scope="scope">
          <el-button type="primary" @click="$emit('viewImg',scope.row.voucher)" :disabled="scope.row.voucher === null || scope.row.voucher.split(';').length ===0">图片</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--工具条-->
    <el-row>
      <el-col :span="24" class="toolbar">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          @size-change="handlePageSizeChange"
          @current-change="handleCurrentPageChange"
          layout="total,sizes,prev, pager, next, jumper"
          :total="total" style="float: right">
        </el-pagination>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  name: 'ChargeOffsList',
  componentName: 'ChargeOffsList',
  props: {
    loadData: Function
  },
  data () {
    return {
      name: null,
      chargeOffsDaterange: [],
      tableData: [],
      listLoading: false,
      dialogVisible: false,
      filters: null,
      currentPage: 1,
      pageSize: 15,
      total: 0,
      condition: {
        EQ_chargeOffsMode: null,
        LIKE_bankCardNumber: null,
        LIKE_serialNumber: null,
        GT_chargeOffsDate: null,
        LT_chargeOffsDate: null
      }
    };
  },
  watch: {
    chargeOffsDaterange (vals) {
      if (vals.length && vals[0] != null && vals[1] != null) {
        this.condition.GT_chargeOffsDate = vals[0].toJSON();
        this.condition.LT_chargeOffsDate = this.$ue.addDays(vals[1], 1).toJSON();
      } else {
        this.condition.GT_chargeOffsDate = null;
        this.condition.LT_chargeOffsDate = null;
      }
    }
  },
  methods: {
    handlePageSizeChange (size) {
      this.pageSize = size;
      this.search();
    },
    handleCurrentPageChange (page) {
      this.currentPage = page;
      this.search();
    },
    resetCondition () {
      this.chargeOffsDaterange = [];
      this.$ue.resetObjNull(this.condition);
    },
    search () {
      this.listLoading = true;
      if (this.name === 'truckLoadOrder') {
        this.loadData({
          filters: this.filters + ';' + this.$ue.objToFilter(this.condition),
          sorts: 'chargeOffsDate,asc',
          page: this.currentPage - 1,
          size: this.pageSize
        }).then((res) => {
          if (res.data) {
            this.listLoading = false;
            this.tableData = res.data;
            this.total = Number(res.headers['x-total-count']);
          }
        });
      } else {
        this.loadData({
          filters: this.filters + ';' + this.$ue.objToFilter(this.condition),
          sorts: '+chargeOffsDate',
          page: this.currentPage,
          size: this.pageSize
        }).then(res => {
          this.listLoading = false;
          if (res.data.successFlg) {
            this.tableData = res.data.detailModelList;
            this.total = res.data.totalCount;
          } else {
            this.$message.error(res.data.errorMsg);
          }
        });
      }
    },
    show (filters = '', name) {
      this.filters = filters;
      this.dialogVisible = true;
      this.resetCondition();
      this.search();
      this.name = name;
    }
  },
  mounted () {
    //
  }
};
</script>
